<script>
import Organization from '../card/Organization'
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import associationApply from "@/api/apply/associationApply.js";

export default {
    data() {
        return {
            dataList:[],
            tablePage: {
				total: 0,
				currentPage: 1,
				pageSize: 6,
			},
            loading: false,
        };
    },
    computed: {
		currentUser() {
			var userInfo = this.$TOOL.data.get("USER_INFO");
			return userInfo;
		},
	},
    components: { Organization , Splitpanes , Pane },
    mounted() {
        this.refreshList();
    },
    methods: {
        // 获取数据列表
		refreshList() {
			this.loading = true;
            associationApply.list({
					current: this.tablePage.currentPage,
					size: this.tablePage.pageSize,
				})
                .then((data) => {
					this.dataList = data.records;
					this.tablePage.total = data.total;
					this.loading = false;
				})
		},
        // 当前页
		currentChangeHandle({ currentPage, pageSize }) {
			this.tablePage.currentPage = currentPage;
			this.tablePage.pageSize = pageSize;
			this.refreshList();
		},
    },
    
}
</script>
<template>
    <splitpanes class="default-theme">
		<pane size="100">
			<el-container class="jp-container">
                <el-main class="nopadding page2">
                    <div class="content">
                        <div style="display: flex;flex-wrap: wrap;">
                            <Organization :data="data" :currentUser="currentUser" v-for="data in dataList"></Organization>
                        </div>
                    </div>
                    <vxe-pager
                            background
                            size="small"
                            :current-page="tablePage.currentPage"
                            :page-size="tablePage.pageSize"
                            :total="tablePage.total"
                            :page-sizes="[
                                6,
                            ]"
                            :layouts="[
                                'PrevPage',
                                'JumpNumber',
                                'NextPage',
                                'FullJump',
                                'Sizes',
                                'Total',
                            ]"
                            @page-change="currentChangeHandle"
                        >
                        </vxe-pager>
                </el-main>
            </el-container>
        </pane>
    </splitpanes>
</template>
<style scoped>
.content{
    height: 90%;
}
</style>